<template>
  <div>
    <nav-bar class="nav_bar">
      <img
        src="../../../assets/img/navbar/ic_title_close.png"
        slot="left"
        class="left"
        alt=""
        @click="$router.back()"
      />
      <div slot="center" class="center">喵币交易记录</div>
    </nav-bar>
    <div class="content">
      <table>
        <tr class="table_title">
          <th v-for="(title, index) in titles" :key="index">{{title}}</th>
        </tr>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <tr v-for="(item, index) in recordList" :key="index">
          <td>{{item.tgid}}</td>
          <td>{{item.total}}</td>
          <td>
            <span>{{item.logtime | fnDate}}</span>
            <span>{{item.logtime | fnDateTime}}</span>
          </td>
          <td>{{typeArr[item.typeid]}}</td>
        </tr>
        </van-list>
      </table>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
import { getPtbList } from '../../../network/home';
import mixinScrollAll from '../../../mixins/mixinScrollAll'
export default {
  mixins: [mixinScrollAll],
  components: { NavBar },
  data() {
    return {
      titles: ['账号', '金额(¥)', '时间', '类型'],
      page: 1,
      recordList: [],
      typeArr: null,
      loading: true,
      finished: false,
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList() {
      getPtbList(this.page).then(res => {
        this.loading = false
        this.typeArr = res.data.type_arr
        if (res.data.list) {
          console.log(res.data.list);
          this.recordList = [...this.recordList, ...res.data.list]
        } else {
          this.finished = true
        }
    });
    },
    onLoad() {
      this.page ++
      this.getList()
    }
  },
}
</script>

<style lang="less" scoped>
.nav_bar {
  background: #fff;
}

.left {
  width: 44px;
  height: 44px;
}

.content {
  margin-top: 176px;
}

table {
  width: 750px;
  font-size: 28px;
  tr {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88px;
    color: #333;
    th {
      line-height: 88px;
      height: 88px;
      background: #f4f4f4;
      flex: 1;
    }
    td {
      line-height: 88px;
      height: 88px;
      font-size: 26px;
      border-bottom: 1px solid #eee;
      flex: 1;
      text-align: center;
      span {
        display: block;
        line-height: 44px;
      }
    }
  }
  .table_title {
    width: 750px;
      position: fixed;
      top: 88px;
      left: 0;
      right: 0;
  }
}
</style>